<template>
	<div :class="[
      'message-input-toolbar',
      'message-input-toolbar-h5',
      'message-input-toolbar-uni',
    ]">
		<div v-if="props.displayType === 'emojiPicker'">
			<EmojiPickerDialog />
		</div>
		<div v-else>
			<swiper :class="['message-input-toolbar-swiper']" :indicator-dots="isSwiperIndicatorDotsEnable"
				:autoplay="false" :circular="false">
				<swiper-item :class="[
            'message-input-toolbar-list',
            'message-input-toolbar-h5-list',
            'message-input-toolbar-uni-list',
          ]">
					<ImageUpload v-if="featureConfig.InputImage" imageSourceType="album" />
					<ImageUpload v-if="featureConfig.InputImage" imageSourceType="camera" />
					<view @click="uploadFileHandle"
						style="display: flex;flex-direction: column;align-items: center;color: #8F959D;margin-top: 8rpx;">
						<image style="width: 100rpx;height: 100rpx;margin-bottom: 8rpx;"
							src="../../../assets/talkImage/file.png" mode="">
						</image>
						文件
					</view>
					<!-- <VideoUpload v-if="featureConfig.InputVideo" videoSourceType="album" /> -->
					<!--     <VideoUpload
            v-if="featureConfig.InputVideo"
            videoSourceType="camera"
          /> -->
					<template v-if="currentExtensionList.length > 0">
						<div v-for="(extension, index) in currentExtensionList.slice(0, slicePos)" :key="index">
							<ToolbarItemContainer v-if="extension" :iconFile="genExtensionIcon(extension)"
								:title="genExtensionText(extension)" iconWidth="25px" iconHeight="25px"
								:needDialog="false" @onIconClick="onExtensionClick(extension)" />
						</div>
					</template>
					<!-- 评价 -->
					<!-- 		<template v-if="neededCountFirstPage === 1">
						<Evaluate v-if="featureConfig.InputEvaluation" @onDialogPopupShowOrHide="handleSwiperDotShow" />
						<Words v-else-if="featureConfig.InputQuickReplies"
							@onDialogPopupShowOrHide="handleSwiperDotShow" />
					</template> -->
					<!-- 常用语 -->
					<!-- 	<template v-if="neededCountFirstPage > 1">
						<Evaluate v-if="featureConfig.InputEvaluation" @onDialogPopupShowOrHide="handleSwiperDotShow" />
						<Words v-if="featureConfig.InputQuickReplies" @onDialogPopupShowOrHide="handleSwiperDotShow" />
					</template> -->
				</swiper-item>
				<swiper-item v-if="neededCountFirstPage <= 1" :class="[
            'message-input-toolbar-list',
            'message-input-toolbar-h5-list',
            'message-input-toolbar-uni-list',
          ]">
					<div v-for="(extension, index) in currentExtensionList.slice(slicePos)" :key="index">
						<ToolbarItemContainer v-if="extension" :iconFile="genExtensionIcon(extension)"
							:title="genExtensionText(extension)" iconWidth="25px" iconHeight="25px" :needDialog="false"
							@onIconClick="onExtensionClick(extension)" />
					</div>
					<template v-if="neededCountFirstPage === 1">
						<Words v-if="featureConfig.InputQuickReplies" @onDialogPopupShowOrHide="handleSwiperDotShow" />
					</template>
					<template v-else>
						<Evaluate v-if="featureConfig.InputEvaluation" @onDialogPopupShowOrHide="handleSwiperDotShow" />
						<Words v-if="featureConfig.InputQuickReplies" @onDialogPopupShowOrHide="handleSwiperDotShow" />
					</template>
				</swiper-item>
			</swiper>
		</div>
		<UserSelector ref="userSelectorRef" :type="selectorShowType" :currentConversation="currentConversation"
			:isGroup="isGroup" @submit="onUserSelectorSubmit" @cancel="onUserSelectorCancel" />
	</div>
</template>
<script setup lang="ts">
	import { ref, onUnmounted, onMounted } from '../../../adapter-vue';
	import TUIChatEngine, {
		TUIChatService,
		IConversationModel,
		TUIStore,
		StoreName,
		TUIReportService,
	} from '@tencentcloud/chat-uikit-engine';
	import TUICore, { ExtensionInfo, TUIConstants } from '@tencentcloud/tui-core';
	import ImageUpload from './image-upload/index.vue';
	import VideoUpload from './video-upload/index.vue';
	import Evaluate from './evaluate/index.vue';
	import Words from './words/index.vue';
	import ToolbarItemContainer from './toolbar-item-container/index.vue';
	import EmojiPickerDialog from './emoji-picker/emoji-picker-dialog.vue';
	import UserSelector from './user-selector/index.vue';
	import TUIChatConfig from '../config';
	import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus';
	import { ToolbarDisplayType } from '../../../interface';
	import OfflinePushInfoManager, { PUSH_SCENE } from '../offlinePushInfoManager/index';


	interface IProps {
		displayType : ToolbarDisplayType;
		groupId : string
	}
	const fileModule = uni.requireNativePlugin("BenBen-ChooseFile")

	const props = withDefaults(defineProps<IProps>(), {
	});

	const currentConversation = ref<IConversationModel>();
	const isGroup = ref<boolean>(false);
	const selectorShowType = ref<string>('');
	const userSelectorRef = ref();
	const currentUserSelectorExtension = ref<ExtensionInfo | null>();
	const currentExtensionList = ref<ExtensionInfo[]>([]);
	const isSwiperIndicatorDotsEnable = ref<boolean>(false);
	const featureConfig = TUIChatConfig.getFeatureConfig();
	const neededCountFirstPage = ref<number>(8);
	const slicePos = ref<number>(0);

	const computeToolbarPaging = () => {
		if (featureConfig.InputImage && featureConfig.InputVideo) {
			neededCountFirstPage.value -= 4;
		} else if (featureConfig.InputImage || featureConfig.InputVideo) {
			neededCountFirstPage.value -= 2;
		}

		slicePos.value = neededCountFirstPage.value;
		neededCountFirstPage.value -= currentExtensionList.value.length;

		if (neededCountFirstPage.value === 1) {
			isSwiperIndicatorDotsEnable.value = (featureConfig.InputEvaluation && featureConfig.InputQuickReplies);
		} else if (neededCountFirstPage.value < 1) {
			isSwiperIndicatorDotsEnable.value = featureConfig.InputEvaluation || featureConfig.InputQuickReplies;
		}
	};

	onMounted(() => {
		TUIStore.watch(StoreName.CUSTOM, {
			activeConversation: onActiveConversationUpdate,
		});
	});

	onUnmounted(() => {
		TUIStore.unwatch(StoreName.CUSTOM, {
			activeConversation: onActiveConversationUpdate,
		});
	});


	const openChat = () => {
		const flieTypes1 = {
			'pdf': 'application/pdf',
			'doc': 'application/msword',
			'docx': 'application/msword',
			'xls': 'application/vnd.ms-excel',
			'xlsx': 'application/vnd.ms-excel',
			'ppt': 'application/vnd.ms-powerpoint',
			'pptx': 'application/vnd.ms-powerpoint',
			'txt': 'text/plain',
			'mp3': 'audio/*',
		}
		const type = Object.values(flieTypes1).join(',')


		fileModule.chooseFile({ type: type, },
			(ret) => {
				if (ret.code != 1) return
				// 获取文件信息
				plus.io.getFileInfo({
					filePath: ret.data,
					success: (fileInfo) => {
						const name = ret.data.replace(/.*(\/|\\)/, '')
						const extension = ret.data.split('.').pop().toLowerCase();

						const obj1 = {
							name: name,// 文件名
							size: fileInfo.size,//本地文件大小
							type: flieTypes1[extension],//文件类型
							path: ret.data,//本地文件路径
						}
						const fileData = {
							files: [obj1],
						};

						messageHandle(fileData);
						// 转化为file文件的方法
						console.log('ffffffffffffffffffffffffffffffffff', ret, fileInfo);

					},
					fail: (err) => { },
				})
			})
	};

	const uploadFileHandle = () => {
		const isApp = ['android', 'ios'].includes(uni.getSystemInfoSync().platform);

		if (isApp) {
			openChat()
		} else {
			// 小程序/H5
			uni.chooseFile({
				count: 1,
				extension: [
					'.pdf', '.xls', '.xlsx', '.txt',
					'.zip', '.doc', '.docx',
					'.ppt', '.pptx',
					'.mp4', '.mov', '.avi', '.mkv'
				],
				success: (res) => {
					const fileInfo = res.tempFiles[0];
					let file;
					if (fileInfo.file) {
						file = fileInfo.file;
					} else {
						file = new File([fileInfo], fileInfo.name, { type: fileInfo.type || '' });
					}
					messageHandle(file);
				}
			});
		}
	};

	// 2. 创建文件消息
	const messageHandle = (file : any) => {
		const message = uni.$chat.createFileMessage({
			to: props.groupId,
			conversationType: TUIChatEngine.TYPES.CONV_GROUP,
			payload: { file }
		})

		// 3. 发送消息
		TUIChatService.sendMessage(message).then((res) => {
			console.log('发送成功:', res)
		}).catch((err) => {
			console.error('发送失败:', err)
		})
	}

	const onActiveConversationUpdate = (conversationID : string) => {
		if (!conversationID) {
			return;
		}
		if (conversationID !== currentConversation.value?.conversationID) {
			getExtensionList();
			computeToolbarPaging();
			currentConversation.value = TUIStore.getData(StoreName.CONV, 'currentConversation');
			isGroup.value = conversationID.startsWith(TUIChatEngine.TYPES.CONV_GROUP);
		}
	};

	const getExtensionList = () => {
		const chatType = TUIChatConfig.getChatType();
		const params : Record<string, boolean | string> = { chatType };
		// Backward compatibility: When callkit does not have chatType judgment, use filterVoice and filterVideo to filter
		if (chatType === TUIConstants.TUIChat.TYPE.CUSTOMER_SERVICE) {
			params.filterVoice = true;
			params.filterVideo = true;
			enableSampleTaskStatus('customerService');
		}
		// uni-app build ios app has null in last index need to filter
		currentExtensionList.value = [
			...TUICore.getExtensionList(TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID, params),
		].filter((extension : ExtensionInfo) => {
			if (extension?.data?.name === 'search') {
				return featureConfig.MessageSearch;
			}
			return true;
		});
		reportExtension(currentExtensionList.value);
	};

	function reportExtension(extensionList : ExtensionInfo[]) {
		extensionList.forEach((extension : ExtensionInfo) => {
			const _name = extension?.data?.name;
			if (_name === 'voiceCall') {
				TUIReportService.reportFeature(203, 'voice-call');
			} else if (_name === 'videoCall') {
				TUIReportService.reportFeature(203, 'video-call');
			} else if (_name === 'quickRoom') {
				TUIReportService.reportFeature(204);
			}
		});
	}

	// handle extensions onclick
	const onExtensionClick = (extension : ExtensionInfo) => {
		// uniapp vue2 build wx lose listener proto
		const extensionModel = currentExtensionList.value.find(
			targetExtension => targetExtension?.data?.name === extension?.data?.name,
		);
		switch (extensionModel?.data?.name) {
			case 'voiceCall':
				onCallExtensionClicked(extensionModel, 1);
				break;
			case 'videoCall':
				onCallExtensionClicked(extensionModel, 2);
				break;
			case 'search':
				extensionModel?.listener?.onClicked?.();
				break;
			default:
				break;
		}
	};

	const onCallExtensionClicked = (extension : ExtensionInfo, callType : number) => {
		selectorShowType.value = extension?.data?.name;
		if (currentConversation?.value?.type === TUIChatEngine.TYPES.CONV_C2C) {
			extension?.listener?.onClicked?.({
				userIDList: [currentConversation?.value?.conversationID?.slice(3)],
				type: callType,
				callParams: {
					offlinePushInfo: OfflinePushInfoManager.getOfflinePushInfo(PUSH_SCENE.CALL),
				},
				version: 'v3',
			});
		} else if (isGroup.value) {
			currentUserSelectorExtension.value = extension;
			userSelectorRef?.value?.toggleShow && userSelectorRef.value.toggleShow(true);
		}
	};

	const genExtensionIcon = (extension : any) => {
		return extension?.icon;
	};
	const genExtensionText = (extension : any) => {
		return extension?.text;
	};

	const onUserSelectorSubmit = (selectedInfo : any) => {
		currentUserSelectorExtension.value?.listener?.onClicked?.({
			...selectedInfo,
			callParams: {
				offlinePushInfo: OfflinePushInfoManager.getOfflinePushInfo(PUSH_SCENE.CALL),
			},
		});
		currentUserSelectorExtension.value = null;
	};

	const onUserSelectorCancel = () => {
		currentUserSelectorExtension.value = null;
	};

	const handleSwiperDotShow = (showStatus : boolean) => {
		isSwiperIndicatorDotsEnable.value = (neededCountFirstPage.value <= 1 && !showStatus);
	};
</script>
<script lang="ts">
	export default {
		options: {
			styleIsolation: 'shared',
		},
	};
</script>
<style lang="scss">
	@import '../../../assets/styles/common';
	@import './style/uni';
</style>